import React from 'react'
import Elements from '@models/Elements'
import Variant from './Variant/index'

import './index.css'

interface IProps {
  el: Elements
  onClick(status: boolean): void
}

export default class Widget extends React.Component<IProps> {
  render() {
    return (
      <div
        className={this.classList}
        onClick={this.handleWidgetClick.bind(this)}
      >
        <Variant el={this.props.el} />
      </div>
    )
  }
  get classList() {
    return `widget ${this.props.el.selected ? 'widget--selected' : ''}`
  }
  handleWidgetClick() {
    this.props.onClick(!this.props.el.selected)
    console.log(this.classList)
  }
}
